<template>
  <div>
    <div>
      <FormPanel ref="formPanel" :list="formList" :cols="2" :labelWidth="110" :formType="type" :isSubmitBtn="false" />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <AjaxButton v-if="type !== 'show'" type="primary" :click="saveDialog">{{ btnText }}</AjaxButton>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { addMaintainWorkType, updateMaintainWorkType, workGroups } from '@/api/repair/repairBusiness/LocationDefined';
import { getWorkerGroups } from '@/api/repair/repairBusiness/instituteDefined';
import _ from 'lodash';

export default {
  name: 'BrandModal',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.conf = { add: '保 存', edit: '保 存' };
    this.saveData = null;
    return {
      formList: this.createFormList(),
      data1: ''
    };
  },
  computed: {
    btnText() {
      return this.conf[this.type];
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.type === 'edit') {
        this.recordId = this.rowData.labourPositionCode;
        this.formList[0].disabled = true;
        this.formList.forEach(x => {
          x.initialValue = this.rowData[x.fieldName];
        });
        // 根据工位类别查询班组信息
        if (!_.isNil(this.rowData.labourPositionType)) {
          this.getWork(this.rowData.labourPositionType);
        }
        this.formList.find(item => item.fieldName === 'updateStatus').initialValue = this.rowData.STATUS;
        if (this.formList.find(item => item.fieldName === 'labourPositionType').initialValue === 0) {
          this.formList.find(item => item.fieldName === 'labourPositionType').initialValue = undefined;
          this.formList = [...this.formList];
        }
        if (this.formList.find(item => item.fieldName === 'isManyPosition').initialValue === 0) {
          this.formList.find(item => item.fieldName === 'isManyPosition').initialValue = undefined;
          this.formList = [...this.formList];
        }
        if (this.formList.find(item => item.fieldName === 'isManyPosition').initialValue === 10041002) {
          this.formList.find(item => item.fieldName === 'repairCapability').initialValue == 1;
          this.formList.find(item => item.fieldName === 'repairCapability').disabled = true;
          this.formList = [...this.formList];
        } else {
          this.formList.find(item => item.fieldName === 'repairCapability').disabled = false;
        }
      }
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '维修工位代码',
          fieldName: 'labourPositionCode',
          placeholder: '请输入...',
          // initialValue: 'WP',
          // maxlength: 5,
          rules: [
            { required: true, message: '请输入维修工位代码', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9]+$/, message: '只允许输入数字和字母' },
            { max: 6, message: '工位代码长度不可超过6位', trigger: 'blur' }
            // { trigger: 'blur', validator: this.checkLabourPositionCode }
          ]
        },
        {
          type: 'INPUT',
          label: '工位名称',
          fieldName: 'labourPositionName',
          placeholder: '请输入...',
          maxlength: 20,
          rules: [
            { required: true, message: '请输入维修工位名称', trigger: 'blur' },
            { min: 1, max: 60, message: '最多输入60个字符!', trigger: 'blur' }
          ]
        },
        {
          type: 'SELECT',
          label: '工位类别',
          fieldName: 'labourPositionType',
          placeholder: '请选择...',
          itemList: this.createDictList('8041'),
          rules: [{ required: false, message: '请选择维修工位类别', trigger: 'change' }],
          change: val => {
            this.getWork(val);
            this.formList.find(item => item.fieldName === 'workGroupCode').initialValue = '';
          }
        },
        {
          type: 'SELECT',
          label: '班组名称',
          fieldName: 'workGroupCode',
          placeholder: '请选择...',
          initialValue: '',
          itemList: [],
          rules: [{ required: false, message: '请选择班组类别', trigger: 'change' }]
        },
        // {
        //   type: 'SELECT',
        //   label: '是否多车工位',
        //   fieldName: 'isManyPosition',
        //   placeholder: '请选择...',
        //   itemList: this.createDictList('1004'),
        //   rules: [{ required: false, message: '请选择是否多车工位', trigger: 'change' }],
        //   change: val => {
        //     this.changRepairCapability(val);
        //   }
        // },
        // {
        //   type: 'INPUT',
        //   label: '工位容量',
        //   fieldName: 'repairCapability',
        //   placeholder: '请输入...',
        //   maxlength: 2,
        //   rules: [
        //     { required: true, message: '请输入工位容量', trigger: 'blur' },
        //     // { min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' },
        //     { pattern: /^[+]{0,1}(\d+)$/, message: '请输入正数' }
        //   ],
        //   onInput: val => {
        //     this.data1 = this.formList.find(x => x.fieldName === 'isManyPosition').initialValue;
        //   }
        // },
        {
          type: 'SELECT',
          label: '工位状态',
          fieldName: 'updateStatus',
          placeholder: '请选择...',
          style: { width: '150' },
          itemList: [
            { text: '启用', value: 10041002 },
            { text: '停用', value: 10041001 }
          ],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      ];
    },
    // checkLabourPositionCode(rule, value, callback) {
    //   if (!value) {
    //     return callback(new Error(rule.message));
    //   } else {
    //     console.log(value.substring(0, 2));
    //     if (value.substring(0, 2) != 'WP') {
    //       callback('前两位必须为WP');
    //     }
    //   }
    //   callback();
    // },
    async getWork(workerTypeCode) {
      this.formList.find(item => item.fieldName === 'workGroupCode').itemList = (await workGroups({ workerTypeCode })).data.map(x => ({
        text: x.workgroupName,
        value: x.workgroupCode
      }));
    },
    // 根据多车工位属性，控制工位
    changRepairCapability(val) {
      // this.positionData = val;
      console.log(val, '判断工位');
      console.log(this.rowData, 'this.rowData');
      if (val === 10041002) {
        this.formList.find(item => item.fieldName === 'repairCapability').initialValue = 1;
        this.formList.find(item => item.fieldName === 'repairCapability').disabled = true;
        this.formList = [...this.formList];
      } else {
        this.formList.find(item => item.fieldName === 'repairCapability').disabled = false;
      }
    },
    async saveDialog() {
      this.saveData = this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData !== null) {
        // this.saveData.repairCapability = this.positionData == 10041002 ? 1 : this.saveData.repairCapability;
        this.$refs.formPanel.SUBMIT_FORM();
        let res = {};
        if (this.type === 'add') {
          res = await addMaintainWorkType(this.saveData);
        }
        if (this.type === 'edit') {
          res = await updateMaintainWorkType(this.saveData, this.recordId);
        }
        if (res.resultCode === 200) {
          this.open2();
          this.closeDialog('refresh');
        }
      }
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    },
    open2() {
      this.$notify({
        title: '成功',
        message: '保存成功',
        type: 'success'
      });
    }
  }
};
</script>
